<template>
	<view>
		<view class="navbar">
			<u-navbar :safeAreaInsetTop="true" leftIcon="" bgColor="transparent" :placeholder="true">

				<view class="navbar-left" slot="left" @click="cancel">
					<u-icon name="arrow-left"></u-icon>
				</view>

				<view class="navbar-center" slot="center">
					添加地址
				</view>

				<!-- <view class="navbar-right flex-no-horizontal" v-if="id" :class="{'deleteText':text !== ''}" slot="right"
					@click="deleteClick()">
					删除
				</view> -->
			</u-navbar>
		</view>
		<div class="contPage">
			<div class="contList">
				<div class="listLeft">真实姓名：</div>
				<div class="listRight"><input placeholder="请输入姓名" v-model="addressData.name" type="text" /></div>
			</div>
			<div class="contList">
				<div class="listLeft">手机号码：</div>
				<div class="listRight"><input placeholder="请输入手机号" type="number" maxlength="11" v-model="addressData.phone" /></div>
			</div>
			<div class="contList">
				<div class="listLeft">所在地区：</div>
				<div class="listRight" @click="showType = true">
					<input placeholder="请输入所在地区" disabled v-model="addressText" type="text" />

					<div class="rightIcon">></div>
				</div>
			</div>
			<div class="contList">
				<div class="listLeft">详情地址：</div>
				<div class="listRight"><input v-model="addressData.address" placeholder="如小区、楼栋号、门牌号等" type="text" />
				</div>
			</div>
			<div class="contList">
				<div class="listLeft">默认地址：</div>
				<div class="listRight">
					<u-switch v-model="addressData.is_top" activeColor="#000000" @change="change"></u-switch>
				</div>
			</div>
		</div>
		<div class="btm">
			<div class="btn" @click="onAdd()">保存</div>
		</div>
		<address-picker :show="showType" @cancel="onClose" @confirm="onConfirm"></address-picker>
	</view>
</template>

<script>

	import {
		add,
		getById,
		update,
		del
	} from '../../api/apiH5.js';
	export default {
		data() {
			return {
				showType: false,
				addressText: '',
				id: '', //地址ID,
				addressData: {
					sheng: '', //省
					shi: '', //市
					qu: '', //区
					address: '', //详情地址
					name: '', //姓名
					phone: '', //手机号
					is_top: false,
				}
			};
		},
		onLoad(e) {
			console.log(e);
			if (e.id) {
				this.id = e.id;
				this.onGetById();
			}
		},
		methods: {

			lxfs(phone) {
				return new Promise((resolve,reject)=>{
					var patrn = /^1[3456789]\d{9}$/;
					console.log(77, phone, patrn.test(phone))
					if (patrn.test(phone) == false) {
						uni.showToast({
							title: `输入格式错误！请输入正确的联系方式！`,
							icon: 'none'
						});
						reject();
					}
					resolve();
				});
			},
			//关闭当前页返回上一页
			cancel() {
				uni.navigateBack()
			},
			async deleteClick() {
				try {
					const res = await del({
						id: this.id
					});
					uni.showToast({
						title: `删除成功`,
						icon: 'none'
					});
					setTimeout(() => {
						this.cancel();
					}, 2000)
				} catch (e) {
					uni.showToast({
						title: `删除失败`,
						icon: 'none'
					});
				}
			},
			change(e) {
				this.addressData.is_top = e
			},
			//获取地址详情赋值
			async onGetById() {
				try {
					const res = await getById({
						id: this.id
					});
					let data = res.data.data;
					this.addressData.sheng = data.sheng;
					this.addressData.shi = data.shi;
					this.addressData.qu = data.qu;
					this.addressData.address = data.address;
					this.addressData.name = data.name;
					this.addressData.phone = data.phone;
					this.addressData.is_top = data.is_top ? true : false;
					this.addressText = `${data.sheng} ${data.shi} ${data.qu}`;
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading();
				}
			},
			//传入省市区
			onConfirm(e) {
				this.addressData.sheng = e.value[0];
				this.addressData.shi = e.value[1];
				this.addressData.qu = e.value[2];
				this.addressText = `${e.value[0]} ${e.value[1]} ${e.value[2]}`;
				this.showType = false;
			},
			onClose() {
				this.showType = false;
			},
			//添加或修改地址
			async onAdd() {
				
				await this.onType();
				await this.lxfs(this.addressData.phone)
				try {
					if (this.id != '') {
						const res = await update({
							...this.addressData,
							id: this.id
						});
					} else {
						const res = await add(this.addressData);
					}
					uni.showToast({
						title: `${this.id != '' ? '修改' : '添加'}成功`,
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading();
				}
			},
			// 判断是否选择完毕
			onType() {
				return new Promise((resolve,reject)=>{
					let a = this.addressData;
					console.log(a)
					if (a.name == '') {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						});
						reject()
					}
					if (a.phone == '') {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						reject()
					}
					if (a.phone.length < 11) {
						uni.showToast({
							title: '请输入正确手机号',
							icon: 'none'
						});
						reject()
					}
					if (a.sheng == '' || a.shi == '' || a.qu == '') {
						uni.showToast({
							title: '请选择省市区',
							icon: 'none'
						});
						reject()
					}
					if (a.address == '') {
						uni.showToast({
							title: '请输入详情地址',
							icon: 'none'
						});
						reject()
					}
					resolve();
				});
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.deleteText {}

	.navbar {
		.navbar-left {
			color: $uni-color-black;
			font-size: $uni-font-size-lg;
		}
		.navbar-center {
			color: $uni-color-black;
			font-size: $uni-font-size-lg;
			font-weight: bold;
		}
		.navbar-right {
			color: #f00;
			font-size: $uni-font-size-base;
		}


	}

	.contPage {
		padding: 10px;

		.contList {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			.listLeft {
				margin-right: 10px;
			}

			.listRight {
				position: relative;
				width: 70%;

				.rightIcon {
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
	}

	.btm {
		width: 100%;
		position: fixed;
		bottom: 0;
		margin: auto;

		.btn {
			width: 90%;
			margin: 0 auto 10px;
			background: #000;
			border-radius: 20px;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			padding: 10px 0;
		}
	}
</style>
